<template>
	<view class="">
		<view class="search">
			<view class="search_input">
				<input class="search_input_input" 
				type="text" style="width: 200upx;" 
				v-model="search_content"
				placeholder-class="place" 
				placeholder="儿童加绒外套49.9" />
				<i class="icon search_icon"> &#xe605; </i>
				<i class="icon error_icon" @tap="clear" v-if="search_content"> &#xe66f; </i>
			</view>
			<view class="btn" v-if="search_content">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				search_content: ''
			}
		},
		methods: {
			clear() {
				this.search_content = ''
			}
		}
	}
</script>

<style lang="less" scoped>
	.search {
		width: 100%;
		height: 100upx;
		background-color: #f83e2f;
		padding: 0 30upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.search_input {
			flex: 1;
			height: 60upx;
			background-color: #ff6b4d;
			position: relative;
			.search_input_input {
				width: 100% !important;
				height: 100%;
				background-color: #ff6b4d;
				border-radius: 8upx;
				font-size: 28upx;
				color: #F1F1F1;
				padding-left: 50upx;
				box-sizing: border-box;
			}
			.search_icon {
				position: absolute;
				left: 10upx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 28upx;
				height: 28upx;
				color: #fff;
			}
			.error_icon {
				position: absolute;
				right: 10upx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 28upx;
				color: #F1F1F1;
			}
		}
		.btn {
			width: 80upx;
			height: 60upx;
			border-radius: 10upx;
			background-color: #f83e2f;
			color: #F1F1F1;
			font-size: 28upx;
			text-align: center;
			line-height: 60upx;
			margin-left: 20upx;
		}
	}
</style>
